import React from "react";
import { Layout, Menu } from "antd";
import { Outlet, useNavigate, useLocation } from "react-router-dom";

const { Sider, Content } = Layout;

function UserManagement() {
  const navigate = useNavigate();
  const location = useLocation();

  // 根据当前路径动态设置选中状态
  const selectedKey = location.pathname.includes("sysrecruiter")
    ? "sysrecruiter"
    : location.pathname.includes("sysjobseeker")
    ? "sysjobseeker"
    : "sysalluser";

  const menuItems = [
    {
      key: "sysalluser", // 确保 key 值与路由路径一致
      label: "所有用户",
    },
    {
      key: "sysrecruiter", // 确保 key 值与路由路径一致
      label: "招聘方",
    },
    {
      key: "sysjobseeker", // 确保 key 值与路由路径一致
      label: "求职者",
    },
  ];

  const handleMenuClick = (e) => {
    // 根据菜单项的 key 跳转到对应的路由
    switch (e.key) {
      case "sysalluser": // 修正 key 值
        navigate("sysalluser");
        break;
      case "sysrecruiter": // 修正 key 值
        navigate("sysrecruiter");
        break;
      case "sysjobseeker": // 修正 key 值
        navigate("sysjobseeker");
        break;
      default:
        break;
    }
  };

  return (
    <Layout>
      <Sider width={200} style={{ background: "#fff" }}>
        <Menu
          mode="inline"
          selectedKeys={[selectedKey]} // 动态设置选中状态
          onClick={handleMenuClick} // 点击菜单项时跳转
          items={menuItems} // 菜单项
        />
      </Sider>
      <Layout style={{ padding: "20px" }}>
        <Content
          style={{
            background: "#fff",
            padding: "20px",
            margin: 0,
            minHeight: 280,
            borderRadius: "8px",
            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
            overflow: "auto",
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}

export default UserManagement;
